<template>
	<view class="merchant-list-layout">
		<z-paging ref="pagingRef" bg-color="#f7f7f7" v-model="dataList" @query="queryList" use-page-scroll>
			<!-- 搜索 -->
			<view class="merchant-search-box">
				<xh-agent-search placeholder="请输入商户名称或机具编号" tipText="为了保护市场规范,只显示您直营的商户数据" v-model="keywords" :sortList="sortList" @searchResult="searchResult" @sortResult="sortResult"></xh-agent-search>
			</view>
			<!-- 列表  -->
			<view class="merchant-list">
				<view class="merchant-list-item" v-for="item in dataList" :key="item.merchantId" @tap="showMerchantDetail(item)">
					<image src="/static/operate/agent_photo.png" mode="aspectFit"></image>
					<view class="merchant-list-item-container">
						<text class="merchant-list-item-container-title">{{item.merchantName}}</text>
						<text class="merchant-list-item-container-code">{{item.deviceNo}}</text>
						<view class="merchant-list-item-container-cell-box">
							<text>绑定时间：</text>
							<text class="merchant-list-item-container-time" :class="[selectSortKey == 'BIND_TIME' ? 'text-sort' : '']">{{dayjs(item.bindDate).format('YYYY-MM-DD')}}</text>
						</view>
						<view class="merchant-list-item-container-cell-box">
							<text>{{getItemInfo(item).title}}</text>
							<text class="merchant-list-item-container-money" :class="[selectSortKey != 'BIND_TIME' ? 'text-sort' : '']">{{getItemInfo(item).amount}}</text>
						</view>
						
					</view>
					<xh-icon icon="icon_jiantou" style="margin-left: auto;"></xh-icon>
				</view>
			</view>
		</z-paging>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getMerchantList } from '@/common/api/api.js'
	import dayjs from 'dayjs'
	import useZPaging from "@/node_modules/z-paging/components/z-paging/js/hooks/useZPaging.js"
	const dataList = ref([])
	const pagingRef = ref(null)
	const keywords = ref('')
	const selectSortKey = ref('BIND_TIME')
	const sortList = ref([{value:'按绑定时间',key:'BIND_TIME'},{value:'按上月交易额',key:'MER_LAST_MONTH_TRANS_AMOUNT'},{value:'按本月交易额',key:'MER_MONTH_TRANS_AMOUNT'},{value:'按总交易额',key:'MER_ALL_TRANS_AMOUNT'}])
	useZPaging(pagingRef)
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		params.sortType = 'DESC'
		if(uni.$uv.test.digits(keywords.value)){
			params.ksnNo = keywords.value
		}
		else{
			params.merName = keywords.value
		}
		if(!uni.$uv.test.mobile(selectSortKey.value)){
			params.sortField = selectSortKey.value
		}
		const res = await getMerchantList(params, pageNo)
		const list = res.result
		if(pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value,...list]
		pagingRef.value.completeByTotal(list,res.page.totalElements)
	}
	// 处理数据显示
	const getItemInfo = (item)=>{
		if(selectSortKey.value == 'MER_LAST_MONTH_TRANS_AMOUNT'){
			return {
				title:'上月交易额：',
				amount:item.lastMonthAmount
			}
		}
		else if(selectSortKey.value == 'MER_MONTH_TRANS_AMOUNT'){
			return {
				title:'本月交易额：',
				amount:item.monthAmount
			}
		}
		else if(selectSortKey.value == 'MER_ALL_TRANS_AMOUNT'){
			return {
				title:'总交易额：',
				amount:item.totalAmount
			}
		}
		return {
			title:'总交易额：',
			amount:item.totalAmount
		}
	}
	// 商户详情
	const showMerchantDetail = (item)=>{
		const data = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url:`/pages/home/merchant-manager/merchant-list/merchant-detail/merchant-detail?data=${data}`
		})
	}
	// 搜索回调
	const searchResult = ()=>{
		pagingRef.value.reload()
	}
	// 排序回调
	const sortResult = (sort)=>{
		selectSortKey.value = sort
		pagingRef.value.reload()
	}
	
</script>

<style lang="scss" scoped>
	.merchant-list-layout {
		.merchant-search-box{
			padding: 30rpx;
		}
		.merchant-list{
			padding: 0 30rpx 30rpx;
			.merchant-list-item{
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				image{
					width: 96rpx;
					height: 96rpx;
					flex-shrink: 0;
				}
				.merchant-list-item-container{
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					font-size: 26rpx;
					color: $xh-color-6;
					.merchant-list-item-container-title{
						font-size: 28rpx;
						color: $xh-color-3;
					}
					.merchant-list-item-container-code{
						margin-top: 10rpx;
						font-size: 26rpx;
						color: $xh-color-6;
					}
					.merchant-list-item-container-cell-box{
						margin-top: 10rpx;
						font-size: 26rpx;
						color: $xh-color-6;
						.text-sort{
							color: #E37211;
						}
					}
				}
			}
		}
	}
</style>